import { Fragment } from '@/components/Fragment'; 
import { Button, Icon, Flex, Text, Alert, Link } from '@aws-amplify/ui-react';
import { IconDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';

import {
  AccessibilityIconExample,
  DefaultIconExample,
  CustomIconExample,
  IconColorExample,
  IconSizesExample,
  CustomIconWithSvgExample,
  CustomIconWithPathsExample,
  CustomIconWithLibExample,
  ViewboxExample,
} from './examples';

## Demo

<IconDemo />

<Alert variation="info" role="none" heading="Note">
Icons should be thought of as plain text; they inherit the size and color of their context or can be set directly. Icons themselves do not have any state or handlers, those should be at a higher level like a button. Amplify UI does not include any icons other than the ones Amplify UI components like [Alert](/components/alert) and [Expander](/components/expander) use.
</Alert>

## Usage

Import the Icon component and styles.

<Example>
<DefaultIconExample />
  <ExampleCode>

```jsx file=./examples/DefaultIconExample.tsx

```
  </ExampleCode>
</Example>

### Built-in iconset

<Alert variation="warning" role="none" heading="Deprecated">
  The built-in icons were removed in version `3.0`. You can use the
  [react-icons](https://react-icons.github.io/react-icons/) package or other
  React icon libraries in its place. 
</Alert>

```jsx
// Removed
import {ICON_NAME} from '@aws-amplify/ui-react';

// Suggested
import {ICON_NAME} from 'react-icons/md';`
```

## Custom icon

### Using path data

To create a custom icon using a path data, provide the `d` attribute in svg to `pathData` prop.

<Example>
  <CustomIconExample />
  
  <ExampleCode>

```jsx file=./examples/CustomIconExample.tsx

```

  </ExampleCode>
</Example>

You can use the `viewBox` prop to change the SVG [`viewBox`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox). Both `width` and `height` default to `24`.

<Example>
  <ViewboxExample />
  
  <ExampleCode>

```jsx file=./examples/ViewboxExample.tsx

```

  </ExampleCode>
</Example>

### Using SVG

You can also pass SVG elements as children to the `Icon` component if you have more than 1 path or want to provide other SVG attributes like [`stroke`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke)

<Example>
  <CustomIconWithSvgExample />
  
  <ExampleCode>

```jsx file=./examples/CustomIconWithSvgExample.tsx

```

  </ExampleCode>
</Example>

You can also optionally use a `paths` array of path-like objects that will be mapped to `<path>` elements.

<Example>
  <CustomIconWithPathsExample />
  
  <ExampleCode>

```jsx file=./examples/CustomIconWithPathsExample.tsx

```

  </ExampleCode>
</Example>

### Using a library

To use an icon library like [React Icons](https://react-icons.github.io/react-icons/), import the desired icon and pass it to the `as` prop.

<Example>
  <CustomIconWithLibExample />
  
  <ExampleCode>

```jsx file=./examples/CustomIconWithLibExample.tsx

```

  </ExampleCode>
</Example>

Here are some good open source icon libraries:

- <Link href="https://react-icons.github.io/react-icons/" isExternal={true}>React icons</Link>
- <Link href="https://heroicons.com/" isExternal={true}>Hero icons</Link>

## Styling

### Target classes

<ComponentStyleDisplay componentName="Icon" />

### Sizes

Icon size matches the font-size of the container. Adjust the font-size to set a specific height.

_Inherited size from button sizes_

<Example>
  <IconSizesExample />
  
  <ExampleCode>

```jsx file=./examples/IconSizesExample.tsx

```

  </ExampleCode>
</Example>

### Color

Use the `color` prop to change the Icon color. The fill of the path inside the SVG is set to [`currentColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword)(inherits color from current font color).

<Example>
  <IconColorExample />
  
  <ExampleCode>

```jsx file=./examples/IconColorExample.tsx

```

  </ExampleCode>
</Example>

## Accessibility

The Icon component does not require a label by default because there are a number of ways to use an Icon in an accessible way:
- You can set an `aria-label` attribute on the Icon
- You can use a `<title></title>` element when passing SVG elements as the child of the Icon
- You can use the Icon decoratively, when a label would be redundant.

<Example>
  <AccessibilityIconExample />
  
  <ExampleCode>

```jsx file=./examples/AccessibilityIconExample.tsx

```

  </ExampleCode>
</Example>